﻿<div id="topNav" style="width:1000px">
   <ul>
      <li><a href='/tab0'><span>Publishers</span></a><input type="hidden" value='@Url.Action("Index", "Publisher")' /></li>
      <li><a href='/tab1'><span>Authors</span></a><input type="hidden" value='@Url.Action("Index", "Author")' /></li>
      <li><a href='/tab2'><span>Books</span></a><input type="hidden" value='@Url.Action("Index", "Book")' /></li>
   </ul>
</div>

<script type="text/javascript">
    function MatchTab(li) {
        var url = $(li).find(':hidden').val();
        var parts = $.splitUrl(url);
        var tabControllerName = parts[0];
        var tabActionName = (parts.length === 1) ? "Index" : parts[2];
        if (tabControllerName === jqViewContext.controller && tabActionName === jqViewContext.action) return 2;
        if (tabControllerName === jqViewContext.controller && tabActionName !== jqViewContext.action) return 1;
        return 0;
    }

    function OnTabClicked(a) {
        var li = $(a).closest('li');
        if (MatchTab(li) !== 2) {
            var url = $(li).find(':hidden').val();
            window.location = url;
        }
    }

    $(function () {
        $('#topNav').tabs({
            select: function (event, ui) { OnTabClicked(ui.tab); },
            spinner: ""
        });

        $('#topNav li').each(function (index, li) {
            var match = MatchTab(li);
            if (match !== 0) {
                $('#topNav').tabs("option", "selected", index);
                // If we are in a subsection off of the current tab (ex: /Publisher/PublisherDetail), then enable clicking on the active tab.
                // A click will navigate to the "home" page of the section (ex: /Publisher).
                if (match === 1) {
                    $(li).find('a').css("cursor", "pointer").click(function () { OnTabClicked(this); });
                }
                return false;
            }
        });

        $('#tabContent').appendTo('#topNav');
    });
</script>